<template>
  <div>
    <el-dialog
      title="用户详情"
      :visible.sync="show"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="600px"
      @close="handleClose"
    >
      <div>
        <el-form
          :model="userInfo1"
          ref="userInfo"
          label-width="100px"
          label-position="right"
          size="small"
        >
          <el-form-item label="头像：">
            <el-image
              style="width: 60px; height: 60px"
              :src="userInfo1.icon"
            ></el-image>
          </el-form-item>
          <el-form-item label="昵称：" prop="nickName">
            <el-input
              v-model="userInfo1.nickname"
              disabled
              placeholder="请输入昵称"
            ></el-input>
          </el-form-item>
          <el-form-item label="真实姓名：">
            <el-input
              v-model="userInfo1.realname"
              placeholder="请输入真实姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="身份证号码：">
            <el-input
              v-model="userInfo1.cardId"
              maxlength="18"
              placeholder="请输入身份证号码"
            ></el-input>
          </el-form-item>
          <el-form-item label="会员类型：" prop="type">
            <el-radio-group v-model="userInfo1.type">
              <el-radio
                v-for="item in typeList"
                :key="item.value"
                :label="item.dictValue"
                >{{ item.dictLabel }}</el-radio
              > 
            </el-radio-group>
          </el-form-item>
          <el-form-item label="性别：">
            <el-radio-group v-model="userInfo1.gender">
              <el-radio :label="0">未知</el-radio>
              <el-radio :label="1">男</el-radio>
              <el-radio :label="2">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="状态：">
            <el-switch
              class="switchStyle"
              v-model="userInfo1.status"
              :active-value="1"
              :inactive-value="0"
              active-text="开启"
              inactive-text="禁用"
            >
            </el-switch>
          </el-form-item>
          <el-form-item label="备注：">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入备注"
              v-model="userInfo1.note"
            >
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button style="width: 100px" type="primary" @click="handleEdit()"
              >提交</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { editMember } from "@/api/member";
export default {
  name: "MemberDetail",

  props: {
    detailVisible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: String,
      default: "",
    },
    userInfo: {
      type: Object,
      default: () => {},
    },
  },
  watch: {
    detailVisible(val) {
      this.show = val;
    },
    async userInfo(val) {
      this.userInfo1 = val;
    },
  },
  data() {
    return {
      rules: [],
      show: false,
      userInfo1: {},
      typeList: [],
    };
  },

  async mounted() {
    let typeList = await this.$getDictData("account_type");
    this.typeList = typeList.map((item) => {
      item.dictValue = Number(item.dictValue);
      return item;
    });
  },
  methods: {
    handleClose() {
      this.$emit("closeUserDialog");
    },
    handleEdit() {
      let regCard =
        /^\d{6}(?:19|20)\d{2}(?:0[1-9]|1[0-2])(?:0[1-9]|[1-2]\d|3[0-1])\d{3}[0-9X]$/;
      if (this.userInfo1.cardId && !regCard.test(this.userInfo1.cardId)) {
        this.$message.warning("请输入正确的身份证号码");
        return;
      }

      let params = {
        id: this.userInfo1.id,
        realname: this.userInfo1.realname,
        cardId: this.userInfo1.cardId,
        gender: this.userInfo1.gender,
        note: this.userInfo1.note,
        status: this.userInfo1.status,
        type: this.userInfo1.type,
      };

      editMember(params).then((res) => {
        this.$message.success("修改成功");
        this.$emit("closeUserDialog", true);
      });
    },
  },
};
</script>

<style></style>
